import styled from 'styled-components';
import React, { CSSProperties, useState, useEffect } from 'react';
import { LoadingOutlined } from '@ant-design/icons';

import { qiniuGetUrl } from '../../services';

export interface QiniuImageProps {
    style?: CSSProperties;
    src: string;
    [key: string]: any;
}

export const QiniuImage: React.FC<QiniuImageProps> = (props) => {

    const [url, setUrl] = useState<string | null>(null);

    useEffect(() => {
        //
        qiniuGetUrl([props.src]).then((url) => {
            if (url && url.length > 0) {
                setUrl(url[0]);
            }
        });
    }, [props.src]);

    if (!url) {
        return <IconContainer {...props}><LoadingOutlined /></IconContainer>;
    }
    return <Image  {...props} src={url}></Image>;
}

const Image = styled.img`
`;

const IconContainer = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ff7875;
`;
